<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >

        <div class="m-t-xs m-t-sm">
          <span>系统管理</span>
          <i class="fa fa-angle-right"></i>
          <span>用户管理</span>
          <i class="fa fa-angle-right"></i>
          <span>用户列表</span>
        </div>

      </div>
    </div>
  </div>
  <div class="wrapper-sm" style="font-size:12px">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-6" >
            <form class="bs-example form-horizontal">
              <div class="form-group">

                <div class="col-lg-9">
                  <div class="input-group">
                    <input id="account-keyword"  [(ngModel)]="keyword" type="search" class="form-control input-sm ng-valid ng-dirty" placeholder="账号、公司、用户名..." name="ketword">
                <span class="input-group-btn">
                  <button class=" btn btn-default btn-sm" type="button" >搜索</button>
                </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="col-lg-6 " [ngStyle]="{display: elc.a}">
            <button class="btn btn-info btn-sm pull-right" (click)="newModal()"  style="margin-right: 10px">新增</button>
          </div>
        </div>
        <table  class="table table-striped table-hover m-b-none ">
          <thead>
          <tr>
            <th style="width:10%">账号</th>
            <th style="width:20%">所属公司</th>
            <th style="width:10%">用户名</th>
            <th style="width:20%">电话</th>
            <th style="width:20%">创建时间</th>
            <th style="width:20%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let aaData of data">
            <td>{{aaData.username}}</td>
            <td>{{aaData.company}}</td>
            <td>{{aaData.nick_name}}</td>
            <td>{{aaData.mobile}}</td>
            <td>{{aaData.created}}</td>
            <td>
              <a [ngStyle]="{display: elc.e}" (click)="editModal(aaData)">
                <span tooltip="{{tool.editaccountTooltip}}" class="glyphicon glyphicon-pencil " style="color: green;margin-right: 10px" ></span>
              </a>

              <a [ngStyle]="{display: elc.d}" (click)="deleteModal(aaData)">
                <span tooltip="{{tool.delaccountTooltip}}" class="glyphicon glyphicon-remove" style="color: red; margin-right: 10px" ></span>
              </a>

              <a [ngStyle]="{display: elc.r}" [routerLink]="['assinroles',aaData.id]">
                  <span tooltip="{{tool.assignrolesTooltip}}" class="glyphicon glyphicon-plus " style="color: purple;margin-right: 10px" >
                  </span>
              </a>

              <a [ngStyle]="{display: elc.p}" [routerLink]="['assinproducts',aaData.id]">
                  <span tooltip="{{tool.assignproductTooltip}}" class="glyphicon glyphicon-plus " style="color: purple;margin-right: 10px" >
                  </span>
              </a>

            </td>
          </tr>
          </tbody>
        </table>

        <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>
      </div>
    </div>
  </div>

</div>



  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">新增用户</p>
            <p *ngIf="buttonType==2">编辑用户</p>
            <p *ngIf="buttonType==3">删除用户</p>
          </h3>
        </div>
        <div class="modal-body">
          <div class="row" *ngIf="buttonType!=3">
            <div class="col-sm-12 ">
              <div class="bs-example form-horizontal">
                <div class="form-group">
                  <label class="col-lg-3 control-label">所属公司</label>
                  <div class="col-lg-7">
                    <select [(ngModel)]="model.company_id" class="form-control m-b" *ngIf="buttonType == 1" required="">
                      <option value="">--请选择公司--</option>
                      <option *ngFor="let option of companyData" value="{{option.id}}">{{option.name}}</option>
                    </select>
                    <input type="text" class="form-control"  [(ngModel)]="model.company" *ngIf="buttonType == 2" [disabled]="buttonType==2">
                  </div>
                  <div class="col-lg-2" style="color:red;margin-top: 8px;">
                    <p [hidden]="model.company_id||model.company">必填</p>
                  </div>
                </div>
                <div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">账号</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control"  [(ngModel)]="model.username" placeholder="请输入账号" [disabled]="buttonType==2">
                    </div>
                    <div class="col-lg-2" style="color:red;margin-top: 8px;">
                      <p [hidden]="model.username">必填</p>
                    </div>
                  </div>
                  <div class="form-group" *ngIf="buttonType == 1">
                    <label class="col-lg-3 control-label">密码</label>
                    <div class="col-lg-7">
                      <input type="password" class="form-control"  [(ngModel)]="model.password" placeholder="请输入密码">
                    </div>
                    <div class="col-lg-2" style="color:red;margin-top: 8px;">
                      <p [hidden]="model.password">必填</p>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">昵称</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control"  [(ngModel)]="model.nick_name" placeholder="请输入昵称">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">邮箱</label>
                    <div class="col-lg-7">
                      <input type="email" class="form-control"  [(ngModel)]="model.email" name="email"  placeholder="请输入邮箱">                 
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">电话</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control"  [(ngModel)]="model.mobile" placeholder="请输入联系电话">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">上传账户图片</label>
                    <div class="col-lg-7">
                      <input type="text" class="form-control" id="file_upload" name="file_upload" type="file" multiple="true" >
                      <span id="file_uploaded"></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-lg-3 control-label">备注</label>
                    <div class="col-lg-7">
                      <textarea class="form-control"  [(ngModel)]="model.remark"></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div *ngIf="buttonType==3">
            <alert type="danger">
              <h4>你确定要删除该角色吗？一旦点击<strong>确定</strong>按钮，则该角色将会被删除。</h4>
            </alert>
          </div>


        </div>
        <div class="modal-footer">
          <button *ngIf="buttonType==1" class="btn btn-primary" (click)="confirmNew()" [disabled]="disabled||!model.company_id||!model.username||!model.password">确定</button>
          <button *ngIf="buttonType==2" class="btn btn-primary" (click)="confirmEdit()" [disabled]="disabled">确定</button>
          <button *ngIf="buttonType==3" class="btn btn-danger" (click)="confirmDelete()" [disabled]="disabled">确定</button>
          <button class="btn btn-default" (click)="myModal.hide();cansel()">取消</button>
        </div>
      </div>
    </div>
  </div>
